<template>
	<view>
		<view class="menu-box">
			<view class="menu-list">
				<scroll-view scroll-x="true" class="scroll_box">
					<view class="box_list">
						<view class="list" >品牌</view>
						<view class="list" v-for="(item,key) in brand_list" :class="{'active':active==item.id}" @click="setActive(item.id)" :key="key">{{item.title}}</view>				
					</view>
				</scroll-view>
			</view>
		</view>
		<view class="banner">
			<image :src="brand_logo" class="banner" mode="widthFix"></image>
		</view>
		<view class="more_box">
			<view class="more" @click="goBrandDetail">
				品牌详情
			</view>
		</view>
		<view class="banner-show" v-if="sample_list.length>0">
			<view class="">展厅样品展示</view>
			<view class="line"></view>
			<swiper :indicator-dots="true" indicator-active-color="gray" indicator-color="#cccccc" :autoplay="true"  class="show-img">
				<swiper-item v-for="(item,key) in sample_list" :key="key" >
					<image class="show-img" lazy-load="true" :src="item.image" @click="goGoodDetail(item.id)" mode="widthFix"></image>
				</swiper-item>
			</swiper>
		</view>
		<view class="more_box" v-if="sample_list.length>0">
			<view class="more" @click="goCustomList(sample_list[0].brand_id,sample_list[0].category_id)">
				更多内容
			</view>
		</view>
		<view class="gray_box"></view>
		<view class="list_box">
			<view class="left_menu_box"  ref="left_menu_box">
				<view class="left_menu_contain">
					<view class="left_menu" v-for="(item,key) in category_list" :key="key" @click="setCategroyActive(item.id)" :class="{'active':active_menu==item.id}">
						{{item.title}}
					</view>
				</view>
			</view>
			<view class="right_menu_box" :style="{'height':view_height}">	
				<scroll-view scroll-y="true" :scroll-into-view="toView" scroll-with-animation="true">
					<view class="right_menu_box" :style="{'height':view_height}">
						<view class="" v-for="(item,key) in category_list" :key="key" :id="'id_'+item.id" v-if="active_menu == item.id">
							<view class="right_menu">
								<view class="title">
									{{item.title}}
								</view>
								<view class="goods_box">
									<view class="goods_item" v-for="(list,index) in item.customized" :key="index"  @click="goGoodDetail(list.id)">
										<image :src="list.image" class="goods_img" mode=""></image>
										<view class="goods_name">
											{{list.title}}
										</view>
										<view class="goods_dec">
											{{list.sub_title}}
										</view>
									</view>
								</view>
							</view>
						<!-- 	<view class="more_box">
								<view class="more" @click="goCustomList(item.brand_id,item.id)">
									更多
								</view>
							</view> -->
						</view>
					</view>
				</scroll-view>
				
			</view>
		</view>
		<view class="write-box">
			<image lazy-load="true"  src="../../static/images/huishou.png" @click="goPost()" class="write"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				active:0,
				active_menu:0,
				user_id:0,
				stauts_code:0,
				brand_list:[],
				sample_list:[],
				category_list:[],
				brand_logo:'',
				toView:'id_',
				brand_id_i:0,
				view_height:''
			}
		},
		onShow() {
			var self = this;
			self.$request.request({
				url:'/user/info',
				success:function(res){
					self.stauts_code = res.code
					if(res.code==200){
						self.user_id = res.result.id
					}
				}
			});
			self.getBrand();
			
			// #ifdef H5
			let share_time_line={
				title:self.$request.h5_share_name+'.家具定制专区', // 分享标题
				link: self.$request.h5_share_url+'?page=custom', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			let share_app_message={
				title: self.$request.h5_share_name, // 分享标题
				desc: '领得定制联合品牌', // 分享描述
				link: self.$request.h5_share_url+'?page=custom', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
				imgUrl: self.$request.h5_img_url+'/static/images/logo.png', // 分享图标
			}
			uni.setStorageSync('share_time_line',share_time_line);
			uni.setStorageSync('share_app_message',share_app_message);
			self.$request.wx_config()
			// #endif
		},
		methods: {
			getBrand(){
				var self = this;
				self.$request.request({
					url:'/customized/brand',
					success:function(res){
						
						if(res.code==200){
							var x = res.result;
							x.forEach( (list,index) =>{
								x[index].logo = self.$http_img(list.logo)
							})
							self.brand_list = x;
							self.setBrandLogo(self.brand_list[0].id)
							self.getCategory(self.brand_list[0].id)
							self.getSample(self.brand_list[0].id);
							self.active = self.brand_list[0].id
						}
					}
				});
			},
			setActive(id){
				this.active=id;
				this.setBrandLogo(id);
				this.getCategory(id);
				this.getSample(id);
			},
			setBrandLogo(id){
				var self = this;
				self.brand_list.forEach( (item,index) =>{
					if(item.id == id){
						self.brand_logo = item.logo;
						self.brand_id_i = item.id;
					}
				})
			},
			setCategroyActive(id){
				this.active_menu = id;
				this.toView = 'id_'+id;
			},
			getCategory(id){
				var self = this;
				self.$request.request({
					url:'/customized/category',
					data:{
						brand_id:id,
						only:0,
						all:1
					},
					success:function(res){
						if(res.code==200){
							var x = res.result.category;
							x.forEach( (item,index) =>{
								item.customized.forEach( (list,key) =>{
									x[index].customized[key].image = self.$http_img(list.image)
								})
							})
							self.category_list = x;
							console.log(self.category_list)
							self.active_menu = self.category_list[0].id;
							
							setTimeout(()=>{
								let info = uni.createSelectorQuery().select(".left_menu_contain");
								　　　  　info.boundingClientRect(function(data) { //data - 各种参数
								　　　  　console.log(data.height)  // 获取元素宽度
										self.view_height = data.height > 400 ? data.height + 'px' : "400px"
								　　    }).exec()
							},1000)
						}
					}
				});
			},
			getSample(id){
				var self = this;
				self.$request.request({
					url:'/customized/sample',
					data:{
						brand_id:id
					},
					success:function(res){
						if(res.code==200){
							var x = res.result;
							x.forEach( (list,index) =>{
								x[index].image = self.$http_img(list.image)
							})
							self.sample_list = x;
							console.log(self.sample_list)
						}
					}
				});
			},
			goCustomList(brand_id,category_id){
				uni.navigateTo({
				    url: '../custom-list/custom-list?brand_id='+brand_id+'&category_id='+category_id
				});
			},
			goGoodDetail(id){
				uni.navigateTo({
				    url: '../custom-detail/custom-detail?id='+id
				});
			},
			goBrandDetail(){
				uni.navigateTo({
				    url: '../custom-detail-brand/custom-detail-brand?id='+this.brand_id_i
				});
			},
			goPost(){
				uni.switchTab({
				    url: '/pages/index/index'
				});
			}
		}
	}
</script>

<style>
@import url("custom.css");
</style>
